import { ProForm, ProFormRadio, ProFormSelect, ProFormText, ProFormDigit, ProFormDependency } from "@ant-design/pro-components"
import ProFormMenu from "./proFormMenu";
import { useDictOptions } from "@/hooks"
import ProFormIcon from "@/components/proFormIcon";

// 1.集合达观大屏菜单，菜单增加图标-icon,展示位置-position，
// 菜单样式-modalProps，是否隐藏左侧菜单-hideleft，
// url类型编码-urlType，自定义业务key-businessKey,
// 自定义业务类型-businessType。
// 2.菜单树支持超过10级配置。层级设置为20。
// 3.角色管理-权限管理，菜单包含多个子菜单，只勾选部分子菜单，保存报异常。

const AppMenuForm = ({ formMenu }) => {
  const { data: statusOptions } = useDictOptions('sys_normal_disable')
  const { data: resourceOptions } = useDictOptions('resource_type')
  const { data: openOptions } = useDictOptions('open_type')
  const { data: routeOptions } = useDictOptions('route_type')

  return <>
    <ProForm.Group rowProps={{
      gutter: 20
    }}>

      <ProForm.Item name='id' hidden></ProForm.Item>
      <ProForm.Item name='version' hidden></ProForm.Item>
      <ProForm.Item name='treeSort' hidden></ProForm.Item>
      <ProForm.Item name='treeLevel' hidden></ProForm.Item>

      <ProFormMenu
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="parentId"
        label="上级节点"
        placeholder="请选择上级节点"
        rules={[{ required: true, message: '上级节点不能为空' }]}
        fieldProps={{
          ...formMenu
        }}
      />
      <ProFormIcon
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="icon"
        label="资源图标"
      />
      {/* <ProFormIcon
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="resourceIcon"
        label="资源图标"
      /> */}


      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="resourceName"
        label="资源名称"
        placeholder="请输入资源名称"
        rules={[{ required: true, message: '资源名称不能为空' }]}
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="resourceCode"
        label="资源编码"
        placeholder="请输入资源编码"
        rules={[{ required: true, message: '资源编码不能为空' }]}
      />

      <ProFormSelect
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="resourceType"
        label="资源类型"
        placeholder="资源类型"
        rules={[{ required: true, message: '资源类型:(1菜单,2功能,3API,4数据)不能为空' }]}
        options={resourceOptions}
      />
      <ProFormDependency name={["resourceType"]}>
        {({ resourceType }) => {
          if (resourceType === '3') {
            return <ProFormText
              colProps={{ lg: 12, md: 12, sm: 24 }}
              name="requestUrl"
              label="url请求"
              placeholder="请输入url请求"
            />
          }

          if (resourceType === '1') {

            return <>
              <ProFormText
                colProps={{ lg: 12, md: 12, sm: 24 }}
                name="requestUrl"
                label="url请求"
                placeholder="请输入url请求"
              />
              <ProFormSelect
                colProps={{ lg: 12, md: 12, sm: 24 }}
                name="routeType"
                label="加载方式"
                placeholder="请选择加载方式"
                rules={[{ required: true, message: '加载方式:(1嵌入,2独立)不能为空' }]}
                options={routeOptions}
              />

              <ProFormSelect
                colProps={{ lg: 12, md: 12, sm: 24 }}
                name="openType"
                label="打开方式"
                placeholder="请选择打开方式"
                rules={[{ required: true, message: '打开方式:(1内部,2外部)不能为空' }]}
                options={openOptions}
              />
            </>
          }

        }}
      </ProFormDependency>

      <ProFormDigit
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="sort"
        label="排序"
        min={0}
      />



      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="position"
        label="展示位置"
        placeholder="请输入展示位置"
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="modalProps"
        label="菜单样式"
        placeholder="请输入菜单样式"
      />

      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="urlType"
        label="url类型"
        placeholder="请输入url类型"
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="businessKey"
        label="业务key"
        placeholder="请输入业务key"
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="businessType"
        label="业务类型"
        placeholder="请输入业务类型"
      />
      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="启用状态"
        name="status"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={statusOptions}
      />

      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="左侧菜单"
        name="hideleft"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={[{ label: '显示', value: '1' }, { label: '隐藏', value: '2' }]}
      />

    </ProForm.Group>
  </>
}

export default AppMenuForm